<template>
	<view class="content">
		<!-- 返回 -->
		<image
			class="return"
			@click="$goReturn(1)"
			src="/static/images/chicken/arrow_go.png"
			mode="widthFix"></image>
		<!-- 规则 -->
		<image
			class="rule"
			@click="showRule"
			src="/static/images/chicken/game/question_rule.png"
			mode="widthFix"></image>
		<!-- 内容区域 -->
		<view class="package-box">
			<!-- 倒计时 -->
			<view class="djs-box">
				<u-count-down
					class="djs"
					:timestamp="times"
					bg-color="#7AB0CB"
					border-color="#B5E5FF"
					show-border
					color="#fff"
					@change="timeChange"
					separator-color="#fff"></u-count-down>
			</view>
			<!-- 饲料 -->
			<view class="red-box">
				<image
					class="box-item"
					:style="{
						left: speed1 + '%',
						bottom: '30rpx',
					}"
					src="/static/images/chicken/chicken_1.png"
					mode="widthFix"></image>
				<image
					class="box-item"
					:style="{
						left: speed2 + '%',
						bottom: '230rpx',
					}"
					src="/static/images/chicken/chicken_1.png"
					mode="widthFix"></image>
				<image
					class="box-item"
					:style="{
						left: speed3 + '%',
						bottom: '430rpx',
					}"
					src="/static/images/chicken/chicken_1.png"
					mode="widthFix"></image>
			</view>
		</view>
		<!-- 按钮 -->
		<view @click="addSpeed" class="btn">点击加速</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				times: 60,
				processWidth: 0,
				timer1: null,
				timer2: null,
				timer3: null,
				
				speed1: 0.1,
				add1: 0.1,
				speed2: 0.1,
				add2: 0.1,
				speed3: 0.1,
				add3: 0.1,
			}
		},
		onShow() {
			this.init();
		},
		onReady() {
			
		},
		onHide() {
			this.clearTimer();
		},
		methods: {
			init() {
				this.times = 15;
				
				this.speed();
			},
			clearTimer() {
				clearInterval(this.timer1);
				clearInterval(this.timer2);
				clearInterval(this.timer3);
			},
			speed() {
				this.clearTimer();
				this.timer1 = setInterval(() => {
					if (this.speed1 >= 90) {
						clearInterval(this.timer1);
					}
					this.speed1 += this.add1;
				}, 100);
				this.timer2 = setInterval(() => {
					if (this.speed2 >= 90) {
						clearInterval(this.timer2);
					}
					this.speed2 += this.add2;
				}, 100);
				this.timer3 = setInterval(() => {
					if (this.speed3 >= 90) {
						clearInterval(this.timer3);
					}
					this.speed3 += this.add3;
				}, 100);
			},
			timeChange(val) {
				// console.log(val);
				val <= 0 && this.clearTimer();
			},
			addSpeed() {
				this.add1 = .2;
			},
			showRule() {
				console.log('规则');
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: url('/static/images/chicken/game/running_bg.png') no-repeat center center;
		background-size: 100%;
		::v-deep .u-active {
			border-radius: 30rpx;
		}
		.package-box {
			position: absolute;
			left: 0;
			top: 152rpx;
			width: 100%;
			height: calc(100vh - 152rpx);
			// background-color: rebeccapurple;
			.djs-box {
				display: flex;
				position: absolute;
				left: 50%;
				top: 88rpx;
				transform: translateX(-50%);
				color: #fff;
				.djs {
					::v-deep .u-countdown-time {
						padding: 8rpx;
					}
				}
			}
			.red-box {
				position: absolute;
				left: 0;
				bottom: 350rpx;
				width: 100%;
				.box-item {
					position: absolute;
					width: 100rpx;
					transform: all .1s ease;
				}
			}
		}
		.btn {
			position: absolute;
			left: 50%;
			bottom: 100rpx;
			transform: translateX(-50%);
			width: 583rpx;
			height: 118rpx;
			line-height: 105rpx;
			background: url('/static/images/chicken/game/running_btn.png') no-repeat center center;
			background-size: 100% 100%;
			font-size: 40rpx;
			font-weight: bold;
			text-align: center;
			color: #fff;
		}
		.return {
			position: absolute;
			left: 26rpx;
			top: 30rpx;
			width: 64rpx;
		}
		.rule {
			position: absolute;
			right: 23rpx;
			top: 10rpx;
			width: 100rpx;
		}
	}
</style>